<%--
  Created by IntelliJ IDEA.
  User: DE
  Date: 2019/4/19
  Time: 15:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>注册</title>
    <link href="<%=basePath%>resources/layui/css/layui.css" rel="stylesheet"></link>
    <link href="<%=basePath%>resources/css/style.css" rel="stylesheet"></link>
</head>
<body>
<div class="layui-fluid layui-bg-cyan">
    <div class="layui-row layui-col-xs12 layui-col-md12" style="margin-top: 1%;border-radius: 5px">
        <div class="layui-col-xs12 layui-col-md4 layui-fluid"></div>
        <div class="layui-col-xs12 layui-col-md4 layui-bg-black layui-col-md-offset4" style="margin-top: 1%;border-radius: 5px">

            <div class="layui-col-md12"  style="margin-bottom: 5%">
                <span class="layui-col-md12" style="color: #ffffff;font-size: 40px;text-align: center">校园便捷服务平台</span><br>
                <span class="layui-col-md12" style="color: #ffffff;font-size: 20px;text-align: center">注册校园便捷服务，享受便捷</span>

            </div>
            <form class="layui-form" <%--action="/login/goregister"--%> method="post">
                <div class="layui-form-item  layui-col-xs12 layui-col-md12">
                    <title class="layui-form-label">昵称</title>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item 2layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="userAccount" name="userAccount" lay-verify="number" autocomplete="off" placeholder="请输入账号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userMail" lay-verify="email" autocomplete="off" class="layui-input" placeholder="请输入邮箱">
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="userPhone" lay-verify="phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userPassword" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline">
                            <input type="userAddress" name="userAddress" lay-verify="text" placeholder="请输入地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>




                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="userSex" value="男" title="男" checked="">
                        <input type="radio" name="userSex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label">签名</label>
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="userSign"></textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <button class="layui-btn" id="registerbtn" lay-submit="" lay-filter="userRegister">立即注册</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <div class="layui-form-item layui-col-xs12 layui-col-md12">
                    <div class="layui-col-md12 layui-col-md-offset4">
                        <a href="<%=basePath%>page/login" style="color: white">已有账号？去登录</a>
                    </div>
                </div>

            </form>
        </div>
        <div class="layui-col-xs12 layui-col-md4 layui-bg-blue layui-fluid"></div>

    </div>
</div>
<script type="text/javascript" src="<%=basePath%>resources/jquery-3.2.1/jquery-3.2.1.js" ></script>
<script src="<%=basePath%>resources/layui/layui.all.js"></script>
<script src="<%=basePath%>resources/js/vip_comm.js"></script>
<script>

    /*$(document).ready(function(){


    });*/

    layui.use(['form', 'layer'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,$ = layui.jquery;

        $("#userAccount").blur(function () {
            $.ajax({
                url: "<%=basePath%>login/checkAccount",
                type: "GET",
                data:{"userAccount":$("#userAccount").val()},
                success: function(data){
                    console.log(JSON.stringify(data));
                    if(data.code==1){

                        layer.msg("账号已存在");
                        $("#registerbtn").addClass("layui-disabled");
                    }else {
                        $("#registerbtn").removeClass("layui-disabled");
                    }
                }

            });

        });


        //自定义验证规则
        form.verify({
            userName: function(value){

                if(value.length < 1){
                    return '用户名至少得1个字符';
                }
            }
            ,pass: [
                /^[\S]{6,20}$/
                ,'密码必须6到20位，且不能出现空格'
            ]
            ,content: function(value){
                if(value.length < 1){
                    return '内容不能为空';
                }
            }
        });








        /***
         * 用json提交
         */
        form.on('submit(userRegister)', function(data){

            $.ajax({
                url: "<%=basePath%>login/goregister",
                type: "POST",
                data: data.field,
                dataType: "json",
                success: function(data){
                    layer.msg(data.msg);
                    if(data.code==0){
                        window.location.href=data.data;
                    }else{
                        layer.msg('注册失败');
                    }
                }

            });
            return false;

        });



    });




</script>
</body>
</html>
